<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增数据库')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-details-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">数据库类型：</label>
            <div class="col-sm-8">
                <input name="databaseName" class="form-control" type="text" value="MYSQL">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">ip地址：</label>
            <div class="col-sm-8">
                <input name="ip" id="ip" class="form-control ip" type="text" placeholder="请输入ip地址">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">端口号：</label>
            <div class="col-sm-8">
                <input name="port" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">用户名：</label>
            <div class="col-sm-8">
                <input name="root" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">密码：</label>
            <div class="col-sm-8">
                <input name="password" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = ctx + "system/details"

    $("#form-details-add").validate({
        // onkeyup: false,
        // rules: {
        //     ip: {
        //         ip: true,
        //         remote: {
        //             url: prefix + "/checkIpUnique",
        //             type: "post",
        //             dataType: "json",
        //             data: {
        //                 "ip": function () {
        //                     return $.common.trim($("#ip").val());
        //                 }
        //             },
        //         },
        //         dataFilter: function (data, type) {
        //             return $.validate.unique(data);
        //         }
        //     }
        // },
        // messages: {
        //     "ip": {
        //     remote: "Ip已经存在"
        //     }
        // },
        focusCleanup: true
    });

        function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-details-add').serialize());
        }
    }
</script>
</body>
</html>